<template>
  <div class="container">
    <el-card class="el-card">
      <el-form inline>
        <el-form-item label="时间">
          <el-date-picker
            type="daterange"
            start-placeholder="开始时间"
            format="yyyy-MM-dd"
            range-separator="至"
            end-placeholder="截止时间"
            :picker-options="pickerOptions" />
        </el-form-item>
        <el-form-item label="活动商品">
          <el-select v-model="form.product" placeholder="请选择">
            <el-option
              v-for="item in productList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-row>
          <el-form-item :style="{ display: 'flex', justifyContent: 'flex-end' }">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="resetFields">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="el-card">
      <el-row class="pl20 pr20" :gutter="10">
        <el-col :span="24">
          <div>
            <ul style="margin-top: 10px" class="flex-row">
              <li class="li">落地页曝光uv</li>
              <li class="li">参与活动用户数</li>
              <li class="li">发起邀请用户数</li>
              <li class="li">完成任务用户数</li>
            </ul>
            <ul class="flex-row">
              <li class="da">11</li>
              <li class="da">11</li>
              <li class="da">11</li>
              <li class="da">11</li>
            </ul>
          </div>
        </el-col>
      </el-row>
      <el-row class="pl20 pr20" :gutter="10">
        <el-col :span="24">
          <div>
            <ul style="margin-top: 10px" class="flex-row">
              <li class="li">回流注册新用户数</li>
              <li class="li">回流下单新用户数</li>
              <li class="li">注册K值</li>
              <li class="li">下单K值</li>
            </ul>
            <ul class="flex-row">
              <li class="da">11</li>
              <li class="da">11</li>
              <li class="da">11</li>
              <li class="da">11</li>
            </ul>
          </div>
        </el-col>
      </el-row>
      <el-row class="pl20 pr20" :gutter="10">
        <el-col :span="24">
          <div>
            <ul style="margin-top: 10px" class="flex-row">
              <li class="li">下单新用户留存率</li>
              <li class="li">商品售卖数量</li>
              <li class="li">商品售卖GMV</li>
              <li class="li">人均拉新成本</li>
            </ul>
            <ul class="flex-row">
              <li class="da">11</li>
              <li class="da">11</li>
              <li class="da">11</li>
              <li class="da">11</li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="el-card">
      <div slot="header" class="title">每日参与活动人数、发起邀请人数、完成任务人数</div>
      <line-chart :chart-data="dailyUserCount" />
    </el-card>
    <el-card class="el-card">
      <div slot="header" class="title">每日回流注册新用户数、回流下单新用户数</div>
      <line-chart :chart-data="dailyOrderUsers" />
    </el-card>
    <el-card class="el-card">
      <div slot="header" class="title">每日活动商品售卖数量</div>
      <line-chart :chart-data="dailySoldItems" />
    </el-card>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import LineChart from "../dashboard/LineChart";

export default {
  components: {
    LineChart
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '本周',
            onClick(picker) {
              const end = new Date();
              let start = new Date();
              start.setFullYear(2018);
              start.setMonth(10);
              start.setDate(1);
              end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '本月',
            onClick(picker) {
              const end = new Date();
              let start = new Date();
              start.setFullYear(2018);
              start.setMonth(10);
              start.setDate(1);
              end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }]
      },
      form: {
        product: '',
        Time: []
      },
      productList: [],
      // 每日参与活动人数、发起邀请人数、完成任务人数
      dailyUserCount: {
        xAxis: ['2月01日', '2月02日', '2月03日', '2月04日', '2月05日', '2月06日', '2月07日'],
        data: [
          {
            label: '参与活动人数',
            values: [100, 120, 161, 134, 105, 160, 165]
          },
          {
            label: '发起邀请人数',
            values: [90, 20, 60, 34, 5, 60, 65]
          },
          {
            label: '完成任务人数',
            values: [5, 60, 60, 34, 65, 90, 20]
          }
        ]
      },
      // 每日回流注册新用户数、回流下单新用户数
      dailyOrderUsers: {
        xAxis: ['2月01日', '2月02日', '2月03日', '2月04日', '2月05日', '2月06日', '2月07日'],
        data: [
          {
            label: '回流注册新用户数',
            values: [100, 120, 161, 134, 105, 160, 165]
          },
          {
            label: '回流下单新用户数',
            values: [90, 20, 60, 34, 5, 60, 65]
          }
        ]
      },
      // 每日活动商品售卖数量
      dailySoldItems: {
        xAxis: ['2月01日', '2月02日', '2月03日', '2月04日', '2月05日', '2月06日', '2月07日'],
        data: [
          {
            label: '商品售卖数量',
            values: [100, 120, 161, 134, 105, 160, 165]
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['avatar', 'name'])
  },
  created() {},
  methods: {
    handleSearch() {},
    resetFields() {}
  }
}
</script>

<style scoped lang="stylus">
.container
  .el-card {
    margin: 20px;
    font-size: 14px;
  }
  .flex-row {
    display flex;
    align-items center
  }
  .title {
    font-size: 16px;
    font-weight: 500;
  }
  .li {
    width: 25%;
    font-size: 12px;
    color: #999;
    text-align: center;
  }
  .da {
    margin-top: 10px;
    width: 25%;
    font-size: 20px;
    text-align: center;
  }

  .first {
    float: left;
    width: 50%;
    margin-bottom: 20px;
  }

  .el-table .warning-row {
    background: rgb(39, 138, 230);
  }
</style>
